import '../assets/css/index.css'
import {
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined
} from '@ant-design/icons'
import { Layout, Menu } from 'antd'
import {
  Routes,
  Route,
  Navigate,
  useNavigate,
  useLocation
} from 'react-router-dom'
import { lazy, useState, Suspense } from 'react'
// 首页
const Home = lazy(() => import('../views/home'))
// 菜单
const Menus = lazy(() => import('../views/menu/menu'))
const { Header, Sider, Content } = Layout
function getItem (label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type
  }
}

const items = [
  getItem('首页', '/index/home', <MailOutlined />),
  getItem('系统管理', '', <AppstoreOutlined />, [
    getItem('菜单管理', '/index/menu'),
    getItem('角色管理', '/index/role'),
    getItem('管理员管理', '/index/user')
  ]),
  getItem('商城管理', 'sub4', <SettingOutlined />, [
    getItem('Option 9', '9'),
    getItem('Option 10', '10'),
    getItem('Option 11', '11'),
    getItem('Option 12', '12')
  ])
]

function App () {
  const Navigates = useNavigate()
  const Location = useLocation()
  const [active] = useState(['/index/home'])
  const onClick = e => {
    console.log(e)
    Navigates(e.key)
  }
  return (
    <div className='indexBox'>
      <Layout>
        <Header className='header'>
          <h1>小U后台管理系统</h1>
        </Header>
        <Layout>
          <Sider>
            <Menu
              onClick={onClick}
              style={{
                width: 200,
                minHeight: 600
              }}
              defaultSelectedKeys={active}
              selectedKeys={Location.pathname}
              mode='inline'
              items={items}
            />
          </Sider>
          <Content className='main'>
            {/* 二级路由出口 */}
            <Suspense fallback={<div></div>}>
              <Routes>
                {/* 首页 */}
                <Route path='home' element={<Home></Home>}></Route>
                {/* 菜单管理 */}
                <Route path='menu' element={<Menus></Menus>}></Route>
                {/* 二级路由重定向 */}
                <Route
                  path=''
                  element={<Navigate to='home'></Navigate>}
                ></Route>
              </Routes>
            </Suspense>
          </Content>
        </Layout>
      </Layout>
    </div>
  )
}
export default App
